<h1><? __("Kategorije"); ?></h1>

<div class="actions">
	<a href="javascript:void(0)" onclick="add(event)" class="add">+ Dodaj</a>
	<a href="javascript:void(0)" onclick="del(event)" class="del req-select">Obriši</a>
	<a href="javascript:void(0)" onclick="ren(event)" class="ren req-select">Promeni ime</a>
	<form class="req-select" action="/admin_category/change_image/" method="post" enctype="multipart/form-data" onsubmit="changeImage(this);">
		<input type="hidden" name="id" id="category_id" value="0" />
		<label>Odaberi sliku: </label><input type="file" name="image" id="image-change" class="req-select" />
		<input type="submit" value="Izmeni" />
	</form>
</div>
<div class="left">
	<img src="/image/blank.png" id="category_preview" style="margin-right:5px;border:1px solid #ccc;background:#fff;width:220px;height:180px;display:block" />
</div>
<div class="left">
	<?= $this->fetch("elements/category_selector", array("name"=>"category")); ?>
</div>

<script type="text/javascript">
$(function(){
	$(".tree label").click(function(){
		var sel = getSelected();
		var img = $("#category_preview");
		if(sel){
			$(".actions").addClass("selected");
			img.attr("src", "/image/category/"+urlize(sel.name)+"_h.jpg");
		}else{
			img.attr("src", "/image/blank.png");
			$(".actions").removeClass("selected");
		}
		return false;
	});

	$(".tree").sortable({
		revert: 500,
		change: function(){
			this.changed = true;
		},
		stop: function(e, ui){
			if(!!!this.changed){
				return;
			}
			var ul = $(e.target);
			var position = {};
			ul.children("li").each(function(index){
				var inpt = $(this).children("input");
				inpt[0].value = index;
				position[$(this).attr("value")] = inpt[0].value
			});

			$.ajax({
				url: '/admin_category/reorder',
				type: "post",
				data: {order: position},
				beforeSend: function(){
					var t = $("<div class=\"throbber\" />");
					$(".tree-controls").append(t);
				},
				complete: function(req){
					$(".throbber").remove();
					location.reload();
				}
			});
		}
	});
});
function getSelected(){
	var sel = $("label.selected");
	return sel.length>0 ? {
		id: sel.children("input").val(), 
		name: sel.text().trim(),
		element: sel
	} : false;
}

function ren(){
	var sel = getSelected();
	if(sel){
		var newName = prompt("Promena imena kategorije \""+sel.name+"\"", sel.name);
		newName = newName ? newName : "";
		newName = newName.trim();
		if(newName && newName!=sel.name){
			$.ajax({
				url: '/admin_category/rename/'+sel.id+'/'+newName,
				beforeSend: function(){
					var t = $("<div class=\"throbber\" />");
					sel.element.append(t);
					t.css("left", sel.element.width()+30)
				},
				complete: function(req){
					$(".throbber").remove();
					if(req.status==200){
						flash(req.responseText, "ok");
						sel.element.html(sel.element.html().replace(sel.name, newName));
					}else{
						flash(req.statusText, "error");
					}
				}
			});
		}
	}
}
function add(){
	var sel = getSelected();
	var parent_id = sel ? sel.id : 0;
	var name = prompt("Ime kategorije:");
	name = name ? name : "";
	if(name.trim().length>0){
		$.ajax({
			url: '/admin_category/add/'+name+'/'+parent_id,
			beforeSend: function(){
				var t = $("<div class=\"throbber\" />");
				$(".tree-controls").append(t);
			},
			complete: function(req){
				if(req.status==200){
					location.reload();
				}else{
					flash(req.responseText, "error");
				}
			}
		});
	}
}
function del(){
	var sel = getSelected();
	if(sel){
		if(confirm("\""+sel.name+"\" i sve njene podkategorije će biti obrisane.\nDa li želite da nastavite?")){
			$.ajax({
				url: '/admin_category/delete/'+sel.id,
				beforeSend: function(){
					var t = $("<div class=\"throbber\" />");
					$(".tree-controls").append(t);
				},
				complete: function(req){
					$(".throbber").remove();
					if(req.status==200){
						location.reload();
					}else{
						flash(req.responseText, "error");
					}
				}
			});
		}
	}
}
function changeImage(form){
	sel = getSelected();
	form = $(form);
	$("#category_id").val(sel.id);
	form.submit();
}
</script>